<template>
    <el-col  :style="{height:heightLength+'px'}" class="el-left-menu" :span="3">
        <el-menu
                :default-active="active"
                background-color="#2A3542"
                text-color="#FFFFFF"
                active-text-color="#F8B300"
                unique-opened
                class="el-menu-vertical-demo"
                router
        >
            <el-submenu v-for="(item, index) in routeList" :key="index" :index="item.menuName">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.menuName}}</span>
                </template>
                <el-menu-item
                        v-if="item.childPermissions.length"
                        v-for="list in item.childPermissions"
                        :key="list.menuName"
                        :index="list.menuUrl">
                    {{list.menuName}}
                </el-menu-item>
                <el-menu-item
                        v-if="!item.childPermissions.length"
                        key="首页"
                        index="/">
                    首页
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-col>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js'),
        common = require('../../common.js');
export default {
  data () {
    return {
        active:'',
        scroll:'',
        routeList:[],  
        heightLength:''
    }
  },
  mounted(){
       window.addEventListener('scroll', ()=>{
           let scrollHeight = document.body.scrollHeight;
             this.heightLength =scrollHeight
       })
  },
  created(){
      this.leftPermission();
//      this.activePath();
      this.heightLength = document.body.scrollHeight ;
  },
  methods:{
      leftPermission(){
          let url = CONSTANT.URL.USER.FINDUSERPERMISSIONS;
          let data = {};
          let param = JSON.stringify(data);

          common.requestAjax(url,param,null,(res)=>{
              this.routeList = res.data?res.data.bussData:[];
               this.activePath();
          })
      },
        activePath(){
            if('/' == this.$route.path) {
                this.$nextTick(function(){
                    this.active = this.$route.path;
                })
            } else {
                this.$nextTick(function(){
                    this.active = this.$route.path;
                })
            }
            console.log(this.$route,'aaa' )
        },
      handleOpen(key, keyPath) {
          console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
      }
  }
}
</script>

<style lang="scss">
.icon-home {
  width: 13px;
  height: 20px;
  background: url("../../assets/tel.png") 0 0 no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.el-menu {
    border-right: none;
}
.el-left-menu{
  height:1000px;
  position: fixed;
  left: 0;
  width: 240px;
  top: 100px;
}
.el-menu-vertical-demo{
  height: 100%;
}

.el-menu-item{
  min-width:auto!important;
}
.el-menu-item-group__title{
  padding: 0!important;
}
.el-menu-item{
  padding-right: 0!important;
  padding-top: 0!important;
  padding-left: 51.53%!important;
  a{
      display: block;
      color: #333;
  }
}
.el-submenu__title {
  padding-left: 34.26%!important;
  &:hover {
  }
}

@media screen and (max-width: 1440px) {
  .el-left-menu {
      top: 85px;
  }
}
@media screen and (min-width: 1441px) and (max-width: 1600px) {
}

</style>
